<template>
  <view class="content">
    <div class="lean-bg-box">
      <mSearch
        ref="mSearch"
        class="mSearch-input-box"
        @clickLeft="back"
        :mode="2"
        :placeholder="defaultKeyword"
        @search="doSearch(false)"
        @confirm="doSearch(false)"
        @SwitchType="doSearchSwitch()"
        v-model="keyword"
        :isFocusVal="!isShowSeachGoods"
      ></mSearch>
    </div>

    <view class="search-keyword" v-if="!isShowSeachGoods">
      <!-- <scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
				<block v-for="(row, index) in keywordList" :key="index">
					<view class="keyword-entry" hover-class="keyword-entry-tap">
						<view class="keyword-text" @tap.stop="doSearch(keywordList[index].words)"><rich-text :nodes="row.words"></rich-text></view>
					</view>
				</block>
			</scroll-view> -->
      <div class="keyword-box" v-show="!isShowKeywordList">
        <view class="keyword-block add1">
          <view class="keyword-list-header"
            ><view class="u-tips">搜索热词</view></view
          >
          <view class="keyword keywordBox">
            <view
              class="wes"
              v-for="(keyword, index) in hotKeywordList"
              @tap="doSearch(keyword)"
              :key="index"
              >{{ keyword }}</view
            >
          </view>
        </view>

        <!-- <div class="clear mp-iphonex-bottom" @tap="oldDelete">清空搜索历史</div> -->
      </div>
    </view>
    <view class="keyword-block-goods" v-if="!isShowSeachGoods">
      <view class="keyword-list-header"
        ><view class="u-tips">热门推荐</view></view
      >
      <div v-for="(item, index) in pageData.list" :key="index">
        <goods
          :enableBottomLoad="enableLoad"
          v-if="item.type == 'goods'"
          :res="item.options"
        />
      </div>
    </view>
    <!-- 搜索 -->
    <view class="tabbar" v-if="isShowSeachGoods">
      <view
        class="tab-item"
        :class="{ current: tabIndex === 0 }"
        @click="onTab('goods', 0)"
        >商品</view
      >
      <view
        class="tab-item"
        :class="{ current: tabIndex === 1 }"
        @click="onTab('store', 1)"
        >店铺</view
      >
    </view>
    <view
      class="goods-content"
      v-if="isShowSeachGoods && searchType == 'goods'"
    >
      <view class="navbar">
        <view
          class="nav-item"
          :class="{ current: filterIndex === 0 }"
          @click="tabClick(0)"
          >综合排序</view
        >
        <view
          class="nav-item"
          :class="{ current: filterIndex === 3 }"
          @click="tabClick(3, 'buyCount')"
          >价格升序</view
        >
        <view
          class="nav-item"
          :class="{ current: filterIndex === 4 }"
          @click="tabClick(4, 'price')"
          >价格降序</view
        >
        <img
          src="/static/img/filter-ico.png"
          alt=""
          class="img"
          @click="sortGoods"
        />
      </view>
      <!-- 一行一个商品展示 -->
      <div v-if="isSWitch">
        <scroll-view
          :style="{ height: goodsHeight }"
          enableBackToTop="true"
          lower-threshold="250"
          @scrolltolower="loadmore()"
          scroll-with-animation
          scroll-y
          class="scoll-page"
        >
          <goodsList :res="goodsList" type="oneColumns" :keyword="keyword" />
          <uni-load-more
            :status="loadingType"
            @loadmore="loadmore()"
          ></uni-load-more>
        </scroll-view>
      </div>
      <!-- 一行两个商品展示 -->
      <div
        v-if="
          !isSWitch &&
          !(goodsList == [] || goodsList == '' || goodsList == null)
        "
      >
        <scroll-view
          :style="{ height: goodsHeight }"
          scroll-anchoring
          enableBackToTop="true"
          @scrolltolower="loadmore()"
          scroll-with-animation
          scroll-y
          lower-threshold="250"
          class="scoll-page"
        >
          <goodsList :res="goodsList" :keyword="keyword" />
          <uni-load-more :status="loadingType"></uni-load-more>
        </scroll-view>
      </div>
    </view>
    <view
      class="store-content"
      v-if="isShowSeachGoods && searchType == 'store'"
    >
      <scroll-view
        :style="{ height: goodsHeight }"
        enableBackToTop="true"
        lower-threshold="250"
        @scrolltolower="loadmore()"
        scroll-with-animation
        scroll-y
        class="scoll-page"
      >
        <storeList :res="storeList" type="oneColumns" :keyword="keyword" />
        <uni-load-more
          :status="loadingType"
          @loadmore="loadmore()"
        ></uni-load-more>
      </scroll-view>
    </view>

    <u-popup border-radius="20" mode="right" width="90%" v-model="sortPopup">
      <!-- <view class="status_bar"></view> -->
      <view class="sort-box">
        <!-- <view class="sort-list">
					<view class="sort-item">
						<view class="sort-title">品牌</view>
						<view class="flex" v-if="sortData.brands">
							<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands" @click="handleSort(brand, brandsIndex, 'brand')">
								<view
									class="sort-radius"
									:class="{
										'sort-active': brand.__selected
									}"
								>
									{{ brand.name }}
								</view>
							</view>
						</view>
						<u-empty v-else text="暂无品牌" mode="list"></u-empty>
					</view>
					<view class="sort-item">
						<view class="sort-title">全部分类</view>
						<view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories">
							<view
								class="sort-brand-item"
								:key="categoriesIndex"
								v-for="(categoryId, categoriesIndex) in sortData.categories"
								@click="handleSort(categoryId, categoriesIndex, 'categoryId')"
							>
								<view
									class="sort-radius"
									:class="{
										'sort-active': categoryId.__selected
									}"
								>
									{{ categoryId.name }}
								</view>
							</view>
						</view>
						<u-empty v-else text="暂无分类" mode="list"></u-empty>
					</view>
				</view> -->
        <view class="sort-list">
          <view class="sort-item">
            <view class="sort-title">价格区间</view>
            <view style="display: flex; margin-top: 20rpx; align-items: center">
              <view class="sort-brand-item uinput">
                <view class="sort-radius"
                  ><u-input
                    v-model="minPrice"
                    type="number"
                    placeholder="最低价"
                    input-align="center"
                /></view>
              </view>
              <view>-</view>
              <view class="sort-brand-item uinput">
                <view class="sort-radius"
                  ><u-input
                    v-model="maxPrice"
                    type="number"
                    placeholder="最高价"
                    input-align="center"
                /></view>
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="sort-list" v-if="sortData.paramOptions">
					<view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions">
						<view class="sort-title">{{ param.key }}</view>
						<view class="flex" style="flex-warp:warp" v-if="param.values">
							<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values" @click="handleSort(value, i, 'prop', param)">
								<view
									class="sort-radius"
									:class="{
										'sort-active': value.__selected
									}"
								>
									{{ value.title }}
								</view>
							</view>
						</view>
					</view>
				</view> -->

        <view class="sort-list">
          <view class="sort-item">
            <view class="sort-title">品牌</view>
            <view class="flex" v-if="sortData.brands">
              <view
                class="sort-brand-item"
                :key="brandsIndex"
                v-for="(brand, brandsIndex) in sortData.brands"
                @click="handleSort(brand, brandsIndex, 'brand')"
              >
                <view class="sort-radius">
                  {{ brand.name }}
                </view>
              </view>
            </view>
            <!-- <u-empty v-else text="暂无品牌" mode="list"></u-empty> -->
          </view>
        </view>

        <div class="null-view"></div>
        <view class="sort-btn mp-iphonex-bottom">
          <view class="sort-btn-repick" @click="repick">重置</view>
          <view class="sort-btn-confim" @click="sortConfim">确定</view>
        </view>
      </view>
    </u-popup>
    <div class="empty" v-if="empty">
      <view
        ><image
          style="width: 360rpx; height: 260rpx"
          src="/static/nodata.png"
        ></image
      ></view>
      <view>
        <p class="tip-1">暂无搜索记录</p>
        <p class="tip-2">小伙伴努力录入中～</p>
      </view>
    </div>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
import { getFloorData } from "@/api/home"; //获取楼层装修接口
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
import goodsList from "@/components/m-goods-list/list.vue";
import storeList from "@/components/m-store-list/list.vue";
import { getHotKeywords } from "@/api/home.js";
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
import storage from "@/utils/storage";
export default {
  data() {
    return {
      storeList: [
        {
          storeName: "店铺名称",
          storeDesc:
            "店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介",
          storeImg:
            "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
          goodsList: [
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
          ],
        },
        {
          storeName: "店铺名称",
          storeDesc:
            "店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介",
          storeImg:
            "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
          goodsList: [
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
            {
              goodsPrice: "23.00",
              goodsImg:
                "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9eb6aab6bf614175b936830bd806eb20.jpg?x-oss-process=style/200X200",
            },
          ],
        },
      ],
      searchType: "goods",
      tabIndex: 0,
      pageData: "", //楼层页面数据
      empty: false,
      scrollTop: 0,
      loadIndex: 10,
      oldKeywordIndex: 0,
      selectedWay: {
        brand: [],
        categoryId: [],
        prop: [],
      },

      sortPopup: false, //筛选的开关
      navObj: {
        background: "rgba(255,255,255,0);",
      },
      typeSortData: {
        type: "",
        index: "",
      },
      goodsHeight: "",
      defaultKeyword: "",
      keyword: "",
      oldKeywordList: [],
      hotKeywordList: [],
      keywordList: [],
      goodsList: [],

      cateMaskState: 0, //分类面板展开状态
      loadingType: "more", //加载更多状态
      filterIndex: 0,
      cateId: 0, //已选三级分类id
      priceOrder: 0, //1 价格从低到高 2价格从高到低
      cateList: [],
      isShowSeachGoods: false,
      isShowKeywordList: false,
      sortData: "",
      isSWitch: false,

      params: {
        pageNumber: 1,
        pageSize: 10,
        // sort: 'grade_asc',

        keyword: "",
      },
      minPrice: "",
      maxPrice: "",
      sortParams: {
        pageNumber: 1,
        pageSize: 10,

        // price: "", //价格,示例值(10_30)
        // prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
        // brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
        categoryId: "",
      },

      routerVal: "",
    };
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad(val) {
    this.init();
    //  this.initSortGoods();
    // 接收分类的数据

    this.routerVal = val;

    // 有值
    if (this.routerVal.category) {
      this.params.categoryId = this.routerVal.category;
      this.sortParams.categoryId = this.routerVal.category;
      this.isShowSeachGoods = true;
      this.$nextTick(() => {
        this.$refs.mSearch.isShowSeachGoods = true;
      });
    }
    if (this.routerVal.keyword) {
      this.params.keyword = this.routerVal.keyword;
      this.isShowSeachGoods = true;
    }
    if (this.routerVal.storeId) {
      this.params.storeId = this.routerVal.storeId;
      this.isShowSeachGoods = true;
    }
    if (this.routerVal.promotionType) {
      this.params.promotionType = this.routerVal.promotionType;
      this.isShowSeachGoods = true;
    }
    if (this.routerVal.promotionsId) {
      this.params.promotionsId = this.routerVal.promotionsId;
      this.isShowSeachGoods = true;
    }
    this.loadData();
  },
  components: {
    mSearch,
    goodsList,
    storeList,
    goods: tpl_goods,
  },
  watch: {
    /**
     * 将搜索的字和热词进行匹配,如果为热词则不改商品搜索关键字
     */
    keyword(val) {
      if (val) {
        if (val) {
          this.defaultKeyword = val;
        }
      } else {
        this.defaultKeyword = "请输入搜索商品";
      }
    },
    sortPopup(val) {
      if (val) {
        this.selectedWay = { brand: [], categoryId: [], prop: [] };
      }
    },
  },

  onReachBottom() {
    this.params.pageNumber++;
    this.loadData();
  },

  mounted() {
    this.getHeight();
  },

  methods: {
    getHeight() {
      const { windowWidth, windowHeight } = uni.getSystemInfoSync();

      let topHeight = 0;
      let navHeight = 0;
      let tabbarHeight = 0;

      uni.getSystemInfo({
        success: function (res) {
          // res - 各种参数

          let top = uni.createSelectorQuery().select(".mSearch-input-box");
          top
            .boundingClientRect(function (data) {
              if (data && data.height) {
                //data - 各种参数
                topHeight = data.height; // 获取元素宽度
              }
            })
            .exec();
          let nav = uni.createSelectorQuery().select(".navbar");
          nav
            .boundingClientRect(function (data) {
              if (data && data.height) {
                //data - 各种参数
                navHeight = data.height; // 获取元素宽度
              }
            })
            .exec();
          let tabbar = uni.createSelectorQuery().select(".tabbar");
          tabbar
            .boundingClientRect(function (data) {
              if (data && data.height) {
                //data - 各种参数
                tabbarHeight = data.height; // 获取元素宽度
              }
            })
            .exec();
        },
      });
      console.log(windowHeight, navHeight, topHeight, tabbarHeight);
      this.goodsHeight = windowHeight - navHeight - topHeight - tabbarHeight;
      // #ifdef APP-PLUS
      this.goodsHeight = this.goodsHeight - 100;
      // #endif
      this.goodsHeight += "px";
    },
    onTab(val, num) {
      this.searchType = val;
      this.tabIndex = num;
    },
    // 数据去重一下 只显示一次 减免 劵 什么的
    getPromotion(item) {
      if (item.promotionMap) {
        let array = [];
        Object.keys(item.promotionMap).forEach((child) => {
          if (!array.includes(child.split("-")[0])) {
            array.push(child.split("-")[0]);
          }
        });

        return array;
      }
    },
    // 展示更多数据
    showMore() {
      this.loadOldKeyword(this.oldKeywordIndex);
    },

    // 点击确定进行筛选
    sortConfim() {
      // 处理品牌（多选
      if (!this.params.brandId) {
        this.params.brandId = [];
      } else {
        this.params.brandId = [this.params.brandId];
      }

      // 如果选中品牌 赋值
      this.selectedWay["brand"].forEach((item) => {
        if (item.__selected) {
          this.params.brandId.push(item.value);
        }
      });

      this.params.brandId = this.params.brandId.join("@") || "";

      // 处理分类 (单选)
      if (this.selectedWay["categoryId"][0]) {
        this.params.categoryId = this.selectedWay["categoryId"][0].value;
      }
      if (!this.params.prop) {
        this.params.prop = [];
      } else {
        this.params.prop = [this.params.prop];
      }

      this.selectedWay["prop"].forEach((item) => {
        if (item.__selected) {
          this.params.prop.push(`${item.parent}_${item.title}`);
        }
      });
      this.params.prop = this.params.prop.join("@");
      // 处理价格
      if (this.minPrice || this.maxPrice) {
        this.params.price = `${this.minPrice}_${this.maxPrice}`;
      } else {
        this.params.price = 0;
      }

      this.goodsList = [];

      this.params.pageNumber = 1;
      this.sortParams = this.params;

      this.loadData();
      this.sortPopup = false;
    },

    // 重置
    repick() {
      this.sortParams = {
        pageNumber: 1,
        pageSize: 10,
        categoryId: this.routerVal.category || "",
      };
      this.sortPopup = false;
      this.initSortGoods();
      this.minPrice = "";
      this.maxPrice = "";
      this.params = {
        pageNumber: 1,
        pageSize: 10,
        categoryId: this.routerVal.category || "",
      };
      this.goodsList = [];
      this.loadData();
    },

    // 点击筛选的内容
    handleSort(val, index, type, parent) {
      if (type == "prop") {
        val.parent = parent.key;
      }
      this.selectedWay[type].push(val);
      if (type == "categoryId") {
        this.sortData.categories.forEach((item) => {
          item.__selected = false;
        });
        val.__selected = true;
      } else {
        val.__selected ? (val.__selected = false) : (val.__selected = true);
      }
    },

    init() {
      // 加载搜索记录
      this.loadOldKeyword(this.loadIndex);
      // 加载热词
      this.loadHotKeyword();
      this.getFloorData();
    },
    getFloorData() {
      this.pageData = "";
      getFloorData().then((res) => {
        if (res.data.success) {
          const result = JSON.parse(res.data.result.pageData);
          this.pageData = result;
          if (result.list.length) {
            // 如果最后一个装修模块是商品模块的话 默认启用自动加载
            result.list[result.list.length - 1]
              ? result.list[result.list.length - 1].model == "goods"
                ? (this.enableLoad = true)
                : ""
              : "";
          }
        }
      });
    },
    blur() {
      uni.hideKeyboard();
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 跳转到商品详情
    navigateToDetailPage(item) {
      uni.navigateTo({
        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
      });
    },
    // 跳转地址
    navigateToStoreDetailPage(item) {
      uni.navigateTo({
        url: `/pages/product/shopPage?id=${item.storeId}`,
      });
    },
    loadmore() {
      this.params.pageNumber++;
      this.loadData();
    },
    initSortGoods() {
      getGoodsRelated(this.sortParams).then((res) => {
        if (res.data.success) {
          for (let item of Object.keys(res.data.result)) {
            res.data.result[item].forEach((child) => {
              child.__selected = false;

              // 循环出和品牌分类一样的数据格式
              if (child.values) {
                child.values = child.values.map((item) => ({
                  title: item,
                  __selected: false,
                }));
              }
            });
          }
          this.sortData = res.data.result;
        }
      });
    },

    // 筛选商品
    sortGoods() {
      this.sortPopup = true;
    },

    tabClick(index, type) {
      this.params.pageNumber = 1;
      this.params.pageSize = 10;
      // this.params.order = "desc";
      if (this.params.sort == type) {
        this.params.order == "asc"
          ? (this.params.order = "desc")
          : (this.params.order = "asc");

        this.$set(this.params, "sort", type);
      } else {
        this.params.order = "desc";
        this.$set(this.params, "sort", type);
      }

      if (index == 0) {
        this.params.sort = "releaseTime";
        this.params.order = "desc";
      }

      this.filterIndex = index;

      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0,
      });
      this.loadData("refresh", 1);
      uni.showLoading({
        title: "正在加载",
      });
    },
    //加载默认搜索关键字
    loadDefaultKeyword() {
      /**
       * 定义默认搜索关键字会根据当前热门搜索来进行显示
       * 如果当前热门搜索没有的话，则会显示默认关键字
       */
      if (this.hotKeywordList.length != 0) {
        //
        this.defaultKeyword = this.hotKeywordList[0];
      } else {
        this.defaultKeyword = "请输入搜索商品";
      }
    },
    //加载历史搜索,自动读取本地Storage
    loadOldKeyword(index) {
      this.oldKeywordList = [];
      uni.getStorage({
        key: "OldKeys",
        success: (res) => {
          var OldKeys = JSON.parse(res.data);
          this.oldKeywordIndex = OldKeys.length;
          for (let i = 0; i < index; i++) {
            this.oldKeywordList.push(OldKeys[i]);
          }
        },
      });
    },

    /**
     * 加载热门搜索
     * 1.5分钟之后更新缓存
     * 2.如果有缓存热门关键字则去请求缓存
     */
    async loadHotKeyword() {
      this.hotKeywordList = [];
      if (
        !storage.getHotWords().time ||
        storage.getHotWords().time <= new Date().getTime() / 1000
      ) {
        // 没有缓存或者第一次进入请求接口保存缓存
        let res = await getHotKeywords(10);
        let keywords = res.data.result;

        keywords.forEach((item) => {
          this.hotKeywordList.push(item);
        });

        let hotData = {
          time: new Date().getTime() / 1000 + 30 * 5,
          keywords: keywords,
        };
        storage.setHotWords(hotData);
      } else {
        let keywords = storage.getHotWords().keywords;

        keywords.forEach((item) => {
          this.hotKeywordList.push(item);
        });
      }
      this.loadDefaultKeyword();
    },
    //加载商品 ，带下拉刷新和上滑加载
    async loadData(type, loading) {
      this.loadingType = "loading";
      if (type == "refresh") {
        this.goodsList = [];
      }
      //没有更多直接返回 #TODO
      let goodsList = await getGoodsList(this.params);
      if (goodsList.data.result.records.length < 10) {
        this.loadingType = "noMore";
        this.empty = true;
      } else {
        this.empty = false;
      }
      this.goodsList.push(...goodsList.data.result.records);

      this.initSortGoods();
      if (this.$store.state.isShowToast) {
        uni.hideLoading();
      }
    },

    //高亮关键字
    drawCorrelativeKeyword(keywords, keyword) {
      var len = keywords.length,
        keywordArr = [];
      for (var i = 0; i < len; i++) {
        var row = keywords[i];
        //定义高亮#9f9f9f
        var html = row[0].replace(
          keyword,
          "<span style='color: #9f9f9f;'>" + keyword + "</span>"
        );
        html = "<div>" + html + "</div>";
        var tmpObj = {
          keyword: row[0],
          htmlStr: html,
        };
        keywordArr.push(tmpObj);
      }
      return keywordArr;
    },
    //顶置关键字
    setKeyword(index) {
      this.keyword = this.keywordList[index].keyword;
    },
    //清除历史搜索
    oldDelete() {
      uni.showModal({
        content: "确定清除历史搜索记录？",
        success: (res) => {
          if (res.confirm) {
            this.oldKeywordList = [];
            uni.removeStorage({
              key: "OldKeys",
            });
          }
        },
      });
    },

    // 样式修改布局
    doSearchSwitch() {
      this.isSWitch = !this.isSWitch;
      this.isShowSeachGoods = true;
      this.params.pageNumber = 1;
      this.params.pageSize = 10;
      this.loadData("refresh", 1);
    },

    /**
     * 执行搜索
     */
    doSearch(keyword) {
      //  用户自行搜索/热门搜索/搜索历史
      keyword = keyword === false ? this.keyword : keyword;

      if (!keyword) {
        /**
         * 进行空搜索
         * 第一次搜索如果没有关键词会将热门搜索中第一个热词进行判定
         * 如果没有热词则会展示一个空词搜索
         */
        keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || "";
      }
      this.defaultKeyword == "请输入搜索商品" ? (keyword = "") : "";

      keyword ? (this.keyword = keyword) : "";
      this.saveKeyword(keyword); //保存为历史
      this.isShowSeachGoods = true;
      this.$refs.mSearch.isShowSeachGoods = true;
      setTimeout(() => {
        this.getHeight();
      }, 300);
      this.$refs.mSearch.inputVal = keyword;
      this.params.keyword = this.keyword;
      this.params.pageNumber = 1;
      this.$set(this.sortParams, "keyword", keyword);
      this.loadData("refresh", 1);
    },
    //保存关键字到历史记录
    saveKeyword(keyword) {
      if (!keyword) return false;
      uni.getStorage({
        key: "OldKeys",
        success: (res) => {
          var OldKeys = JSON.parse(res.data);
          var findIndex = OldKeys.indexOf(keyword);
          if (findIndex == -1) {
            OldKeys.unshift(keyword);
          } else {
            OldKeys.splice(findIndex, 1);
            OldKeys.unshift(keyword);
          }
          //最多10个纪录
          OldKeys.length > 10 && OldKeys.pop();

          uni.setStorage({
            key: "OldKeys",
            data: JSON.stringify(OldKeys),
          });
          this.oldKeywordList = OldKeys; //更新历史搜索
        },
        fail: (e) => {
          var OldKeys = [keyword];
          uni.setStorage({
            key: "OldKeys",
            data: JSON.stringify(OldKeys),
          });
          this.oldKeywordList = OldKeys; //更新历史搜索
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./search.scss";
.lean-bg-box {
  width: 100%;
  height: 176rpx;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 230, 147, 0.23) 100%
  );
  padding-top: 100rpx;
  box-sizing: border-box;
}
</style>
